<template>
  <div id="container"></div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'
window._AMapSecurityConfig = {
  // securityJsCode: '3da59b71d8f8663069ebaa6c41de777d'
  securityJsCode: '6b7ca6a2c2b2f877a09846f66adb204e'
}
export default {
  name: 'MapContainer',
  props: {
    addressInput: String
  },
  data () {
    return {
      map: null,
      autoOptions: {
        input: 'searchInputId'
      },
      auto: null,
      PlaceSearch: null,
      // addressInput: '',
      district: null,
      polygons: [],
      heatmap: null,
      heatmapList: []
    }
  },
  methods: {
    initMap () {
      AMapLoader.load({
        key: '901bcddead81f56395658f314b60199e', // 申请好的Web端开发者Key，首次调用 load 时必填
        // key: '80e42b8499d0703ab0daa59d4448a70d', // 申请好的Web端开发者Key，首次调用 load 时必填
        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [
          'AMap.ToolBar',
          'AMap.Scale',
          'AMap.HawkEye',
          'AMap.MapType',
          'AMap.Geolocation',
          'AMap.AutoComplete',
          'AMap.PlaceSearch'
        ] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          this.map = new AMap.Map('container', {
            resizeEnable: true,
            // 设置地图容器id
            viewMode: '3D', // 是否为3D地图模式
            zoom: 10, // 初始化地图级别
            // mapStyle: 'amap://styles/blue', // 默认地图样式(normal)靛青蓝blue
            center: [121.473667, 31.230525] // 初始化地图中心点位置
          })
          this.map.addControl(new AMap.Scale()) // 比例尺
          this.map.addControl(new AMap.ToolBar()) // 缩放按钮
          this.map.addControl(new AMap.HawkEye()) // 鹰眼 小地图
          this.map.addControl(new AMap.MapType()) // 地图类型切换
          this.map.addControl(new AMap.Geolocation()) // 定位
          //   this.auto = new AMap.AutoComplete({
          //     input: this.$store.state.searchInputId
          //   }) // 搜索结果提示
          this.auto = new AMap.AutoComplete(this.autoOptions)
          this.PlaceSearch = new AMap.PlaceSearch({
            map: this.map
          })
          this.auto.on('select', this.select)
        })
        .catch((e) => {
          console.log(e)
        })
    },
    //
    select (e) {
      this.PlaceSearch.setCity(e.poi.adcode)
      this.PlaceSearch.search(e.poi.name) // 关键字查询查询
      this.map.zoom = 5
    },
    // 行政区域划分
    drawBounds (newValue) {
      if (!this.district) {
        const opts = {
          subdistrict: 0, // 获取边界不需要返回下级行政区
          extensions: 'all', // 返回行政区边界坐标组等具体信息
          level: 'district' // 查询行政级别为 市
        }
        this.map.plugin(['AMap.DistrictSearch'], () => {
          this.district = new AMap.DistrictSearch(opts)
        })
      }
      this.district.search(newValue, (status, result) => {
        if (this.polygons != null) {
          this.map.remove(this.polygons) // 清除上一次结果
          this.polygons = []
        }
        //
        if (JSON.stringify(result) === '{}') {
          console.log(status, 'in drawBounds')
          return
        }
        //
        const bounds = result.districtList[0].boundaries
        if (bounds) {
          for (let i = 0; i < bounds.length; i++) {
            const polygon = new AMap.Polygon({
              strokeWeight: 1,
              path: bounds[i],
              fillOpacity: 0.4,
              fillColor: '#80d8ff',
              strokeColor: '#0091ea'
            })
            this.polygons.push(polygon)
          }
        }
        this.map.add(this.polygons)
        this.map.setFitView(this.polygons) // 窗口自适应
      })
    },
    // 热力图显示
    async searchHotChartpos (val) {
      await this.map.plugin(['AMap.PlaceSearch'], () => {
        const placeSearch = new AMap.PlaceSearch({
          pageSize: 50, // 单页显示条数
          pageIndex: 1, // 页码
          city: this.addressInput, // 兴趣点城市
          citylimt: true // 是否强制在限制范围内搜索
          // map: this.map, // 展现结果的地图实例
          // panel: 'panel', // 结果列表将在此容器中进行展示。
          // autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
        })
        // 关键字查询
        placeSearch.search(val, (status, result) => {
          this.getHotChartPos(val, result)
        })
      })
      // this.$notify({
      //   title: '成功',
      //   message: '热力图获取成果，但是由于电脑性能，我们仅加载部分数据',
      //   type: 'success'
      // })
    },
    //
    getHotChartPos (detail, result) {
      if (result === 'USER_DAILY_QUERY_OVER_LIMIT') {
        console.log('测试用查询次数已用尽')
        return
      }
      let lengthSize = result.poiList.pageSize
      const count = result.poiList.count
      if (lengthSize > count) {
        lengthSize = count
      }
      // console.log(lengthSize, 'lengthSize')
      // n为 搜索页数
      for (let n = 0; n <= lengthSize; n++) {
        // this.map.plugin(['AMap.PlaceSearch'], () => {
        // 构造地点查询类
        console.log('构造地点查询类')
        console.log(this.addressInput)
        const realSearch = new AMap.PlaceSearch({
          pageSize: 50, // 单页显示结果条数
          pageIndex: n + 1, // 页码
          city: this.addressInput, // 兴趣点城市
          citylimit: true // 是否强制限制在设置的城市内搜索
          // map: this.map, // 展现结果的地图实例
          // panel: 'panel', // 结果列表将在此容器中进行展示。
          // autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
        })
        realSearch.search(detail, (status, result) => {
          // for (var j = 0; j < 50; j++) {
          // this.map.remove(this.map.getAllOverlays('marker'))
          // var centerPoint = [result.poiList.pois[j].location.lng, result.poiList.pois[j].location.lat]
          if (result === 'USER_DAILY_QUERY_OVER_LIMIT') {
            console.log(result)
            console.log('测试用查询次数已用尽')
            return
          }
          // 热力图
          this.showHatChart(result)
          // }
        })
      }
    },
    // 判断浏览区是否支持canvas
    isSupportCanvas () {
      const elem = document.createElement('canvas')
      return !!(elem.getContext && elem.getContext('2d'))
    },
    // 展示热力图
    showHatChart (result) {
      console.log(result, '展示热力图')
      const info = []
      if (!this.isSupportCanvas()) {
        // return this.$msg.error(
        //   '热力图仅对支持canvas的浏览器适用,您所使用的浏览器不能使用热力图功能,请换个浏览器试试。'
        // )
        console.log(
          '热力图仅对支持canvas的浏览器适用,您所使用的浏览器不能使用热力图功能,请换个浏览器试试。'
        )
      }
      for (let i = 0; i < 50; i++) {
        info.push({
          lng: result.poiList.pois[i].location.lng,
          lat: result.poiList.pois[i].location.lat,
          count: 3 * 6.4 * Math.round(Math.random() * (10 - 2) + 2)
        })
      }
      const _this = this
      this.map.plugin(['AMap.HeatMap'], () => {
        // console.log('nn')
        // 初始化heatmap对象
        _this.heatmap = new AMap.HeatMap(_this.map, {
          radius: 25, // 给定半径
          opacity: [0, 0.5]
          // gradient: {
          //   0.5: 'blue',
          //   0.65: 'rgb(117,211,248)',
          //   0.7: 'rgb(0, 255, 0)',
          //   0.9: '#ffea00',
          //   1.0: 'red'
          // }
        })
        // 设置数据集
        _this.heatmap.setDataSet({
          data: info,
          max: 100
        })
        _this.heatmapList.push(_this.heatmap)
        this.heatmap.show()
        // console.log(_this.heatmapList)
      })
      // console.log(this.heatmapList)
    },
    // 查询地区
    searchPlaceApi (newValue) {
      this.PlaceSearch.search(newValue, (status, result) => {
        if (result === 'USER_DAILY_QUERY_OVER_LIMIT') {
          console.log(result)
          console.log('测试用地区查询次数已用尽')
        }
      })
      this.drawBounds(newValue)
    },
    // 热力图显示与否
    async showHeat () {
      await this.searchHotChartpos('商场')
      console.log('showMap')
    },
    async hideHeat () {
      await this.heatmap.hide()
      console.log('hideMap')
    }
  },
  mounted () {
    // DOM初始化完成进行地图初始化
    this.initMap()
    if (this.$store.state.showHotStatus === true) {
      console.log(true)
    } else {
      console.log(false)
    }
  },
  watch: {
    // addressInput (newValue) {
    //   if (newValue != null) {
    //     console.log('123')
    //     this.PlaceSearch.search(newValue)
    //     this.drawBounds(newValue)
    //   }
    // }
    // showHeatOrNot (newVal) {
    //   if (!newVal) {
    //     // console.log(newVal)
    //     this.searchHotChartpos('商场')
    //   } else {
    //     this.heatmap.hide()
    //   }
    // }
  }
}
</script>

<style lang="less">
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100%;
}
</style>
